<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <style>
    /* 样式用于布局，可根据需要进行调整 */
    body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    #menu {
      background-color: #333;
      height: 100%;
      width: 20%;
      float: left;
      box-sizing: border-box;
      color: #fff;
    }
    #content {
      height: 100%;
      width: 80%;
      float: left;
      padding: 20px;
      box-sizing: border-box;
      background-color: #f9f9f9;
    }
    /* 以下样式用于美化菜单 */
    .menu-item {
      padding: 15px 20px;
      cursor: pointer;
      border-bottom: 1px solid #444;
      transition: background-color 0.3s ease;
    }
    .menu-item:hover {
      background-color: #444;
    }
    /* 样式用于撑满整个右侧区域 */
    #pageFrame {
      width: 100%;
      height: 100%;
      border: none;
    }
    /* 样式用于全屏按钮 */
    #fullscreenButton {
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="menu">
  <div class="menu-item" onclick="loadPage('task-list.html')">任务列表</div>
  <div class="menu-item" onclick="loadPage('model-list.html')">流程列表</div>
  <div class="menu-item" onclick="loadPage('page3.html')">首页</div>
</div>
<div id="content">
  <iframe id="pageFrame" src="" frameborder="0"></iframe>
  <div id="fullscreenButton" onclick="toggleFullScreen()">
    <i class="fas fa-expand-arrows-alt"></i> <!-- Font Awesome图标 -->
  </div>
</div>

<script>
  function loadPage(pageURL) {
    const pageFrame = document.getElementById('pageFrame');
    pageFrame.src = pageURL;
  }

  function toggleFullScreen() {
    const content = document.getElementById('content');

    if (!document.fullscreenElement) {
      content.requestFullscreen().catch(err => {
        alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
      });
    } else {
      document.exitFullscreen();
    }
  }
</script>
</body>
</html>
